
<!-- 
All rights Reserved, Designed By www.youyacao.com 
@Description:交易记录
@author:成都市一颗优雅草科技有限公司     
@version 松鼠聚合直播系统v2.0
注意：本前端源码遵循 MulanPSL-2.0开源协议（木兰宽松许可证）本内容仅限于个人参考，禁止用于其他的商业用途
需要商业用途或者定制开发等可访问songshu.youyacao.com   联系QQ:422108995 23625059584

 -->

<template>
    <div>
        <van-nav-bar
                title="点数交易明细"
                left-text="返回"
                left-arrow
                fixed
                @click-left="onClickLeft"
        />
        <div style="padding-top:46px;">
            <van-search
                    v-model="keyword"
                    placeholder="请输入订单号"
                    show-action
                    shape="round"
                    @search="onSearch"
            >
                <div slot="action" @click="onSearch">搜索</div>
            </van-search>
            <van-tabs v-model="active" @change="changeTab()">
                <van-tab title="全部交易">
                    <div class="item-box" v-for="(item,index) in list.data">
                        <van-row class="item-title">
                            <van-col span="16" class="order">{{item.order_no}}</van-col>
                            <van-col span="8" class="money">
                                <span class="grey" v-if="item.payed_time=='未支付'">{{item.need_money ? '+'+item.need_money : item.need_money}}</span>
                                <span class="blue" v-else-if="item.type== '购买卡密'">-{{item.need_money}}</span>
                                <span class="red" v-else-if="parseFloat(item.need_money)>0">+{{item.need_money}}</span>
                                <span class="blue" v-else-if="parseFloat(item.need_money)<=0">{{item.need_money}}</span>
                            </van-col>
                        </van-row>
                        <div class="item-row">交易类型：[{{item.type}}] </div>
                        <div class="item-row text">{{item.info}}</div>
                        <div class="item-row">创建时间：{{item.create_time}}</div>
                        <div class="item-row">完成时间：<span :style="item.payed_time=='未支付' ?  'color:red' : ''">{{item.payed_time}}</span><van-button v-if="item.payed_time=='未支付' && userinfo.id == item.user_id" style="margin-left: 30px;" size="small" type="primary" @click="doPayMoney(item.id)">完成支付</van-button></div>
                    </div>
                    <van-pagination
                            v-model="list.current_page"
                            :total-items="list.total"
                            :items-per-page="list.per_page"
                            @change="changePage"
                            v-if="list.last_page>1"
                    />
                </van-tab>
                <van-tab title="未支付交易">
                    <div class="item-box" v-for="(item,index) in list.data">
                        <van-row class="item-title">
                            <van-col span="16" class="order">{{item.order_no}}</van-col>
                            <van-col span="8" class="money">
                                <span class="grey" v-if="item.payed_time=='未支付'">{{item.need_money ? '+'+item.need_money : item.need_money}}</span>
                                <span class="red" v-else-if="item.need_money>0">+{{item.need_money}}</span>
                                <span class="blue" v-else-if="item.need_money<=0">{{item.need_money}}</span>
                            </van-col>
                        </van-row>
                        <div class="item-row">交易类型：[{{item.type}}] </div>
                        <div class="item-row text">{{item.info}}</div>
                        <div class="item-row">创建时间：{{item.create_time}}</div>
                        <div class="item-row">完成时间：<span :style="item.payed_time=='未支付' ?  'color:red' : ''">{{item.payed_time}}</span><van-button v-if="item.payed_time=='未支付' && userinfo.id == item.user_id" style="margin-left: 30px;" size="small" type="primary" @click="doPayMoney(item.id)">完成支付</van-button></div>
                    </div>
                    <van-pagination
                            v-model="list.current_page"
                            :total-items="list.total"
                            :items-per-page="list.per_page"
                            @change="changePage"
                            v-if="list.last_page>1"
                    />
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script>
    import global_ from '../Global';
    import { Toast } from 'vant';
    import { Notify } from 'vant';
    export default {
        name: "coinlog",
        props:["userinfo"],
        data(){
            return {
                keyword:"",
                active:0,
                list:[]
            }
        },
        created(){
          this.loadInfo(0,1);
        },
        methods:{
            onClickLeft:function () {
                this.$router.go(-1);
            },
            onSearch:function () {
                this.loadInfo(this.active,1,this.keyword);
            },
            loadInfo:function (type,page,keyword) {
                var toast = Toast.loading({
                    mask: true,
                    duration: 0,
                    message: '加载中...'
                });
                this.$axios.get(global_.serverUrl+"admin/trade/orderlist",{
                    params:{
                        type:type,
                        page:page,
                        keyword:keyword ? keyword : ''
                    }
                }).then((res)=>{
                    toast.clear();
                    if(res.code == 1){
                        this.list = res.data;
                    }
                }).catch(()=>{
                    toast.clear();
                });
            },
            changePage:function (page) {
                this.loadInfo(this.active,page);
            },
            changeTab:function(){
                this.keyword = "";
                this.loadInfo(this.active,1);
            },
            doPayMoney:function (order_id) {
                var toast = Toast.loading({
                    mask: true,
                    duration: 0,
                    message: '提交中...'
                });
                this.$axios.post(global_.serverUrl+"admin/member/dopaymoney",{
                    orderid:order_id
                }).then((res2)=>{
                    toast.clear();
                    if(res2.code != 1){
                        Toast(res2.msg);
                    }else{
                        Notify({ type: 'success', message: '转点成功' });
                        this.loadInfo(this.active,this.list.current_page,this.keyword);
                    }
                }).catch(()=>{
                    toast.clear();
                });
            }
        }
    }
</script>

<style scoped>
.item-box{
    background: #ffffff;
    padding:5px 10px;
    margin: 10px 0px;
}
.item-box .item-title{
    border-bottom: #dcdee1 1px solid;
    padding: 10px;
    font-size: 14px;
}
.item-box .item-title .order{
    font-weight: bold;
}
.item-box .item-title .money{
    text-align: right;
    font-size: 16px;
}
.item-box .item-title .money .red{
    font-weight: bold;
    color: #fa5c6d;
}
.item-box .item-title .money .blue{
    font-weight: bold;
    color: blue;
}
.item-box .item-title .money .grey{
    font-weight: bold;
    color: #7d7e80;
}
.item-row{
    color: #7d7e80;
    padding: 5px 10px;
    font-size: 12px;
}
.item-box .text{
    background: #f8f8f8;
    border-radius: 10px;
    padding: 20px;
}
</style>
